<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta id="viewport" name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>模块管理</title>
    <link type="favicon" rel="shortcut icon" href="./static/img/favicon.ico" />
    <link rel="stylesheet" href="./static/css/bootstrap.css">
    <link rel="stylesheet" href="./static/css/init.css">
    <link rel="stylesheet" href="./static/less/common.css">
    <link rel="stylesheet" href="./static/less/addMenu.css">
    <link href="./static/css/spop.min.css" rel="stylesheet"/>
    <script src="./static/js/Syunew6.js"></script>
    <script src="./static/js/isLogin.js"></script>
</head>
<body>
    <div id="addMenu" class="addMenu-box common-box">
        <div class="head-box">
            <div class="logo-box">
                <img class="logo" src="./static/img/logo_1.png" alt="">
                <span class="title">成都杜甫草堂博物馆综合信息管理平台</span>
            </div>
            <div class="user-box">
                <div class="name">{{userData.userName}}，欢迎您</div>
                <div class="logout">
                    <span @click="logout" class="cus">
                        <i class="glyphicon glyphicon-log-out"></i>
                        <span>登出</span>
                    </span>
                </div>
            </div>
        </div>
        <div class="content">
            <div class="address-box">
                <div class="address">
                    <a class="href" href="/index.html">首页</a>
                    <i class="glyphicon glyphicon-menu-right right"></i>
                    <span>模块管理</span>
                </div>
                <div class="time">
                    {{date + '&nbsp;星期' + week + '&nbsp;' + time}}
                </div>
            </div>

            <div class="tab">
                <p class="title" :class="tabCurrent == 1 ? 'current' : 'cus'">新增模块</p>
                <!-- <p class="title" :class="tabCurrent == 2 ? 'current' : 'cus'">模块列表</p> -->
            </div>

            <div class="con-box clearfix">
                <div class="clearfix" v-if="tabCurrent == 1">
                    <form class="form-horizontal col-lg-8 col-md-10 col-sm-12 col-xs-12 form">
                        <div class="form-group">
                            <label for="name" class="col-sm-3 col-md-2 control-label">模块名称</label>
                            <div class="col-sm-9 col-md-10">
                                <input type="text" class="form-control" id="name" v-model="name" ref="name">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="url" class="col-sm-3 col-md-2 control-label">url地址</label>
                            <div class="col-sm-9 col-md-10">
                                <input type="text" class="form-control" id="url" v-model="url" ref="url" placeholder="例如：http://www.dfct.com 或者 http://192.168.0.1">
                            </div>
                        </div>
                        <div class="form-group window">
                            <label class="col-sm-3 col-md-2 control-label">窗口打开方式</label>
                            <div class="col-sm-9 col-md-10 pt5">
                                <div class="window-box cus" @click="openType(0)">
                                    <div class="u_radio_box" :class="windowOpenType === 0 ? 'current' : ''">
                                        <span class="u_radio"></span>
                                    </div>
                                    <div class="u_label">当前窗口打开</div>
                                </div>
                                <div class="window-box cus" @click="openType(1)">
                                    <div class="u_radio_box" :class="windowOpenType === 1 ? 'current' : ''">
                                        <span class="u_radio"></span>
                                    </div>
                                    <div class="u_label">新窗口打开</div>
                                </div>
                            </div>
                        </div>
                        <div class="form-group window">
                                <label class="col-sm-3 col-md-2 control-label">兼容移动端</label>
                                <div class="col-sm-9 col-md-10 pt5">
                                    <div class="window-box cus" @click="isphone(1)">
                                        <div class="u_radio_box" :class="isphoneType === 1 ? 'current' : ''">
                                            <span class="u_radio"></span>
                                        </div>
                                        <div class="u_label">兼容 </div>
                                    </div>
                                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                    <div class="window-box cus" @click="isphone(0)">
                                        <div class="u_radio_box" :class="isphoneType === 0 ? 'current' : ''">
                                            <span class="u_radio"></span>
                                        </div>
                                        <div class="u_label">不兼容</div>
                                    </div>
                                </div>
                            </div>
                        <div class="form-group mt24">
                            <label for="exampleInputFile" class="col-sm-3 col-md-2 control-label">模块图标</label>
                            <div class="col-sm-9 col-md-10 update-box">
                                <label for="exampleInputFile" class="filebtn cus" :class="(imgLoading || icoUrl) ? 'disable' : ''">
                                    <input type="file" class="update" id="exampleInputFile" accept="image/*"  :disabled="imgLoading || (icoUrl.length>0)" @change="imgUpload">
                                    {{icoUrl.length > 0 ? '已上传' : '选择图片'}}
                                </label>
                                <div class="loadingImg" v-show="imgLoading">
                                    <img src="./static/img/loading.gif" >
                                    <span>正在上传中请稍后</span>
                                </div>
                                <div class="tips" v-show="imgMsg">{{imgMsg}}</div>
                                <p class="help-block" v-show="!imgLoading">建议上传分辨率为50*50，且大小不超过20KB的图片</p>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-3 col-md-2 control-label xs-hidden"></label>
                            <div class="col-sm-9 col-md-19 videos">
                                <p class="video" title="点击删除" v-show="icoUrl" @click="()=>icoUrl=''">{{icoUrl}}</p>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-3 col-md-2 control-label">选择背景颜色</label>
                            <div class="col-sm-9 col-md-10">
                                <div class="colors">
                                    <div class="color-item glyphicon" v-for="(item,index) in show_color_group" :class="select_color == item ? 'current' : ''" :style="'background-color:'+item" @click="selectColor(item)"><span class="colorname">{{item}}</span></div>
                                    <div class="change cus" @click="changeColorGroup(1)">换一组 &nbsp;<i class="glyphicon glyphicon-refresh"></i></div>
                                    
                                </div>
                            </div>
                        </div>
                    </form>
                    <div class="btn-box col-lg-8 col-md-10 col-sm-12 col-xs-12">
                        <div class="btn submit" @click="submit">保存</div>
                    </div>
                </div>
                <div class="clearfix" v-if="tabCurrent == 2">

                </div>
            </div>
        </div>
        <div class="footer">
            Copyright 成都杜甫草堂博物馆
        </div>
    </div>
    <script src="./static/js/jquery-3.3.1.min.js"></script>
    <script src="./static/js/bootstrap.js"></script>
    <script src="./static/js/vue.min.js"></script>
    <script src="./static/js/axios.min.js"></script>
    <script src="./static/api/api.js"></script>
    <script src="./static/js/prism.js"></script>
    <script src="./static/js/spop.min.js"></script>
    <script>
        const color_group = [
            ['#fa86be','#a275e3','#9aebed','#fffcab'],
            ['#ebfffb','#7efaff','#13abc4','#3161a3'],
            ['#5c4d4d','#915b4a','#a96851','#f2f1e7'],
            ['#c9f658','#dbff3d','#55968f','#8acbbb'],
            ['#ffaaaa','#e37070','#c7004c','#8f1537'],
            ['#ffedc6','#cdeeaa','#96dae4','#6d70c6'],
            ['#ffe6eb','#defcfc','#cbf1f5','#a6e3e9'],
            ['#feffdf','#ffe79a','#ffa952','#ef5a5a']
        ]
        var addMenu = new Vue({
            el: '#addMenu',
            data() {
                return {
                    time: this.timeFormat('hh:mm'),
                    date: this.timeFormat('yyyy年MM月dd日'),
                    week: this.timeFormat('D'),
                    baseUrl: api.baseUrl,
                    tabCurrent: 1,
                    userData: store.fetch('userLoginInfo'),
                    all_color_group: color_group,
                    show_color_group: [],
                    color_i: 0,
                    select_color: '',
                    rgba: '',
                    windowOpenType: 0,
                    isphoneType: 1,
                    imgLoading: false,
                    imgMsg: '',
                    icoUrl: '',
                    name: '',
                    url: ''
                }
            },
            created() {

            },
            mounted() {
                this.getDate();
                this.changeColorGroup(0);
            },
            methods: {
                //时间格式化
                timeFormat(fmt) {
                    let date = new Date();
                    let week = {
                        0: '日',
                        1: '一',
                        2: '二',
                        3: '三',
                        4: '四',
                        5: '五',
                        6: '六'
                    }
                    var o = { 
                        "M+" : date.getMonth()+1,     //月份 
                        "d+" : date.getDate(),     //日 
                        "h+" : date.getHours(),     //小时 
                        "m+" : date.getMinutes(),     //分 
                        "s+" : date.getSeconds(),     //秒 
                        "q+" : Math.floor((date.getMonth()+3)/3), //季度 
                        "S" : date.getMilliseconds(),    //毫秒
                        "D" : week[date.getDay()]
                    }; 
                    if(/(y+)/.test(fmt)) 
                    fmt=fmt.replace(RegExp.$1, (date.getFullYear()+"").substr(4 - RegExp.$1.length)); 
                    for(var k in o) 
                    if(new RegExp("("+ k +")").test(fmt)) 
                    fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length))); 
                    return fmt;
                },

                //动态获取时间、
                getDate() {
                    setInterval(() => {
                        this.time = this.timeFormat('hh:mm');
                        this.date = this.timeFormat('yyyy年MM月dd日');
                        this.week = this.timeFormat('D')
                    },1000)
                },

                //登出
                logout() {
                    store.clear('userData');
                    store.clear('userLoginInfo');
                    window.location.href = '/login.html'
                },

                //切换颜色组
                changeColorGroup(e) {
                    if(e) {
                        if(this.color_i == this.all_color_group.length -1) {
                            this.color_i = 0;
                        }else {
                            this.color_i ++;
                        }
                        this.select_color = '';
                    }
                    this.show_color_group = this.all_color_group[this.color_i];
                },

                //选择颜色
                selectColor(item) {
                    this.select_color = item;
                    String.prototype.colorRgb = function(){
                        var sColor = this.toLowerCase();
                        //十六进制颜色值的正则表达式
                        var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
                        // 如果是16进制颜色
                        if (sColor && reg.test(sColor)) {
                            if (sColor.length === 4) {
                                var sColorNew = "#";
                                for (var i=1; i<4; i+=1) {
                                    sColorNew += sColor.slice(i, i+1).concat(sColor.slice(i, i+1));    
                                }
                                sColor = sColorNew;
                            }
                            //处理六位的颜色值
                            var sColorChange = [];
                            for (var i=1; i<7; i+=2) {
                                sColorChange.push(parseInt("0x"+sColor.slice(i, i+2)));    
                            }
                            return "rgba(" + sColorChange.join(",") + ",.85)";
                        }
                        return sColor;
                    };
                    let rgba = this.select_color.colorRgb();
                    this.rgba = rgba;
                },

                //选择窗口打开方式
                openType(i) {
                    this.windowOpenType = i;
                },

                //是否兼容移动端
                isphone(i) {
                    this.isphoneType = i;
                },

                //图片文件上传
                imgUpload(e) {
                    let formData = new FormData();
                    let file = e.target.files[0];
                    if(!file) {
                        return false
                    }
                    formData.append('fileName',file);
                    this.imgLoading = true;
                    api.upload(formData).then(res => {
                        this.imgLoading = false;
                        if(res.data.status == 'success') {
                            this.icoUrl = file.name
                        }else {
                            this.imgMsg = '上传失败，请稍后再试！';
                            setTimeout(() => {
                                this.imgMsg = ''
                            }, 3000)
                        }
                    }).catch(err => {
                        this.imgMsg = '上传失败，请稍后再试！';
                        this.imgLoading = false;
                        setTimeout(() => {
                            this.imgMsg = ''
                        }, 3000)
                    })
                    e.target.value = '';
                },

                //提示通知
                notice(title,msg,type) {
                    spop({
                        template: '<h4 class="spop-title">'+title+'</h4>'+msg,
                        style: type,
                        autoclose: 3000
                    });
                },

                submit() {
                    if(!this.name) {
                        this.notice('错误','请填写模块名称','error');
                        this.$refs.name.focus();
                        return false;
                    }
                    if(!this.url) {
                        this.notice('错误','请填写url地址','error');
                        this.$refs.url.focus();
                        return false;
                    }else {
                        let re = /^((ht|f)tps?):\/\/([\w\-]+(\.[\w\-]+)*\/)*[\w\-]+(\.[\w\-]+)*\/?(\?([\w\-\.,@?^=%&:\/~\+#]*)+)?/;
                        if(!re.test(this.url)) {
                            this.notice('错误','请填写正确的url地址！','error');
                            this.$refs.url.focus();
                            // return false;
                        }
                    }
                    if(!this.icoUrl) {
                        this.notice('错误','请上传模块图标','error');
                        this.$refs.url.focus();
                        return false;
                    }
                    if(!this.rgba) {
                        this.notice('错误','请选择背景颜色','error');
                        this.$refs.url.focus();
                        return false;
                    }
                    let body = {
                        color: this.rgba,
                        phone: this.isphoneType,
                        img: this.icoUrl,
                        title: this.name,
                        newWindow: this.windowOpenType,
                        url: this.url
                    }
                    console.log(body)
                    // return false;
                    api.addMenu(body).then(res => {
                        if(res.data.status == 'success') {
                            this.notice('提示','添加成功！请管理员开放权限后，下次登录方可查看！','success');
                            this.name = '';
                            this.url = '';
                            this.icoUrl = '';
                            this.rgba = '';
                            this.select_color = '';
                            this.windowOpenType = 1;
                            this.isphoneType = 0;
                            let body = {
                                author: this.userData.userName,
                                moduleChileName: '新增模块',
                                moduleName: '模块管理',
                                operation: '添加模块'
                            }
                            this.recordLog(body)
                        }else {
                            this.notice('提示','添加失败！','error');
                        }
                    }).catch(err => {
                        this.notice('提示','服务器开小差了，请稍后再试！','error');
                    })
                },
                recordLog(body,fn=false) {
                    api.updateLog(body).then(res => {
                        if(fn) {
                            let newFN = new Function(fn);
                            newFN();
                        }
                    }).catch(err => {
                        console.error(err)
                    })
                },
            }
        })
    </script>
</body>
</html>